<template>
  <div class="userinfo">
    <div class="top_box">
      <div>
        <el-icon size="20"><House /></el-icon>
      </div>
      <div>
        <el-icon size="20"><Setting /></el-icon>
      </div>
    </div>
    <div class="box">
      <div class="user_box">
        
        <div>
          <div class="username">{{ data.userinfo.userName }}</div>
          <div class="email">{{ data.userinfo.email }}</div>
        </div>
      </div>
      <div class="btn">
        <div>
          <el-button style="width: 7rem; height: 2.5rem">喜欢</el-button>
        </div>
        <div>
          <el-button style="width: 7rem; height: 2.5rem">关注</el-button>
        </div>
        <div>
          <el-button style="width: 7rem; height: 2.5rem">评论</el-button>
        </div>
      </div>
    </div>
    <van-cell title="我的文章" is-link />
    <van-cell title="我的班级" is-link />
    <van-cell title="我的课程" is-link />

    <van-tabbar v-model="data.active">
        <van-tabbar-item to="/article/1" icon="home-o">文章</van-tabbar-item>
        <van-tabbar-item to="/userinfo" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import axios from "axios";
import { ElImage,ElScrollbar } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const data = reactive({
  url: "/src/assets/img/user_img.jpg",
  userinfo: [],
  active:1,
});

const getUserInfo = () => {
  data.userinfo = JSON.parse(localStorage.getItem("user_info"));

  console.log(data.userinfo);
};

onMounted(() => {
  getUserInfo();
  if (!localStorage.getItem("user_info")) {
    router.push("/login");
  }
});
</script>

<style  scoped>
.userinfo {
  margin: 0 auto;
}
.top_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.btn {
  display: flex;
  margin: 1rem 0;
}
.user_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 20rem;
  margin: 1rem 0;
}
.username {
  font-size: 24px;
  font-weight: 800;
}
.email {
  font-size: 12px;
  color: #a3a3b0;
}
.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
</style>